<template>
	<view class="login-view">
		<view class="top-bar"><uni-navbar :fixed="true" :back="false" color="#fff" title="诸城人大代表履职通"></uni-navbar></view>
		<view class="logo-box">
			<view class="logo-ttl">
				<image class="h1-img" :src="$staticImgRandom('/static/img/h1_img_3714.png')" mode="widthFix"></image>
				<!-- <image class="bg-img" :src="$staticImgRandom('/static/img/bg_01.jpg')" mode="aspectFill"></image> -->
			</view>
		</view>

		<view class="form-box">
			<u-form :model="form" ref="uForm">
				<u-form-item left-icon="lock-fill" prop="password1"><u-input inputAlign="left" v-model="form.password1" type="password" placeholder="请输入旧密码" :password-icon="false" /></u-form-item>
				<u-form-item left-icon="lock-fill" prop="password2"><u-input inputAlign="left" v-model="form.password2" type="password" placeholder="请输入新密码" :password-icon="false" /></u-form-item>
				<u-form-item left-icon="lock-fill" prop="password3"><u-input inputAlign="left" v-model="form.password3" type="password" placeholder="请确认新密码" :password-icon="false" /></u-form-item>
				<u-button class="form-btn" type="error" @click="submit">保存</u-button>
			</u-form>
		</view>

		<view class="fiexd-btm"><text>密码必须为8~16位非空字符，并包含大小写字母、数字、特殊字符！</text></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			id: '',
			form: {
				password1: null,
				password2: null,
				password3: null
			},
			rules: {
				password1: [
					{
						required: true,
						message: '请输入旧密码',
						trigger: ['change']
					}
				],
				password2: [
					{
						required: true,
						message: '请输入新密码',
						trigger: ['change']
					}
				],
				password3: [
					{
						required: true,
						message: '请确认新密码',
						trigger: ['change']
					}
				]
			}
		};
	},
	onLoad(option) {
		if (option && option.id) {
			this.id = option.id;
		}
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	methods: {
		submit(e) {
			this.$refs.uForm.validate((valid) => {
				if (!valid) {
					return false;
				}

				if (this.form.password2 !== this.form.password3) {
					this.$msg('新密码必须与确认密码相同！');
					return false;
				}

				const pwpattent = /^(?!.*\s)(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[\W_]).{8,16}$/;
				if (!pwpattent.test(this.form.password2)) {
					this.$msg('密码必须为8~16位非空字符，并包含大小写字母、数字、特殊字符！');
					return false;
				}

				this.form.password2 = this.form.password2;

				this.$request(
					'/system/sys-user/updatePassword',
					{
						id: this.id,
						newPassword: this.form.password2,
						oldPassword: this.form.password1
					},
					{
						load: true
					}
				).then((res) => {
					this.$msg('修改成功');
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/login'
						});
					}, 500);
				});
			});
		}
	}
};
</script>

<style lang="scss">
.login-view {
	min-height: 100vh;
	background: #fff no-repeat top center;
}

.logo-box {
	text-align: center;
	background-color: #d0021b;

	.logo-ttl {
		position: relative;
		margin: 0 auto 20rpx;
		width: 100%;
		height: 494rpx;
	}

	.h1-img {
		position: absolute;
		left: 50%;
		top: 77rpx;
		width: 520rpx;
		transform: translateX(-50%);
	}

	.bg-img {
		width: 100%;
		height: 494rpx;
	}
}

.form-box {
	position: relative;
	z-index: 300;
	margin: 30rpx 48rpx;

	.dataTime {
		width: 100%;
	}

	.form-btn {
		display: block;
		margin-top: 40rpx;
		width: 100%;
	}
}
</style>
